<!-- 本页样式 -->

<style lang="scss" scoped>
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
<style lang="scss">
.applybatch_list {
  .transform {
    .el-icon-sort {
      transform: rotate(90deg) !important;
    }
  }
}

.applybatch-list-popover {
  // background: rgb(243, 243, 243) !important;
  // border-color: #c6e2ff !important;
  // background-color: #ecf5ff;
  .popper__arrow::after {
    // border-left-color: rgb(243, 243, 243) !important;
    border-left-color: #409eff !important;
    // border-left-color: #c6e2ff !important;
    // background-color: #ecf5ff;
  }
}

.delconfirm {
  border: solid 1px #db2828;
  line-height: 30px;
  border-radius: 2px;
  background-color: #ffe8e6;
  color: #db2828;
  margin: 1em 0em;
  padding: 5px 10px;
}

.delconfirminput {
  .el-input__inner {
    background: #fff0f0;
    border-color: #dbb1b1;
    color: #d95c5c;
    border-radius: 2px;
  }
}

.deldialog {
  .el-dialog__body {
    padding: 0px 20px 10px;
  }
}
</style>
<!-- 页面布局-->
<template>
  <div class="table applybatch_list">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>资源管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>资源导入</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-box">
        <div class="search-item-box">
          <table>
            <tr>
              <td>
                <i class="el-icon-search"></i>
              </td>
              <td class="search_td" style="width: 190px">
                <el-input
                  v-model="parampters.applyBatchNo"
                  placeholder="制卡文件名"
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                ></el-input>
              </td>
              <td class="search_td" style="width: 190px">
                <el-input
                  v-model="parampters.vopName"
                  placeholder="虚商"
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                ></el-input>
              </td>
              <td class="search_td" style="width: 190px">
                <el-select
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                  v-model="parampters.ispCode"
                  placeholder="运营商"
                >
                  <el-option
                    v-for="item in ispList"
                    :key="item.ispCode"
                    :label="item.ispName"
                    :value="item.ispCode"
                  ></el-option>
                </el-select>
              </td>
              <td class="search_td" style="width: 190px">
                <el-select
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                  v-model="parampters.status"
                  placeholder="状态"
                >
                  <el-option
                    v-for="item in dicts.dictionary"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </td>
            </tr>
          </table>
        </div>
        <div class="search-button-box">
          <el-button
            type="primary"
            size="small"
            icon="search"
            @click="searchLoad"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            size="small"
            @click="ftpZhika()"
            >FTP导入制卡文件</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            size="small"
            @click="ftpImportMca()"
            >FTP导入MCA</el-button
          >
          <el-button
            type
            icon="el-icon-circle-plus"
            size="small"
            @click="preApply('file')"
            >批量导入制卡文件</el-button
          >
          <el-button
            type
            icon="el-icon-circle-plus"
            size="small"
            @click="preApply('mca')"
            >批量导入MCA</el-button
          >
          <el-button
            type
            icon="el-icon-circle-plus"
            size="small"
            @click="toimportMobile(null, 'nobatchId')"
            >导入手机号文件</el-button
          >
        </div>
      </div>
      <!-- 查询条件END -->
      <!-- 数据列表 -->
      <div class="grid-data-box" :style="autoHeight">
        <el-table
          :data="tableData"
          border
          stripe
          :cell-class-name="changeColumnClass"
          :header-cell-style="{ background: '#F3F3F3', color: '#606266' }"
          show-overflow-tooltip
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            show-overflow-tooltip
          ></el-table-column>
          <template v-for="(column, i) in columnData">
            <el-table-column
              :prop="column.columnCode"
              :key="i"
              sortable
              :width="
                column.columnCode == 'updateTime' ||
                column.columnCode == 'applyBatchNo'
                  ? '150'
                  : 'auto'
              "
              v-if="column.visiable == '1' || column.visiable == 1"
              :label="column.columnName"
              show-overflow-tooltip
            ></el-table-column>
          </template>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-popover
                placement="left"
                width="180"
                trigger="hover"
                popper-class="applybatch-list-popover"
                @show="getRightButton(scope.row)"
              >
                <div class="fxcol fxcc" style="margin: 10px 0">
                  <el-button
                    size="mini"
                    v-for="item in rightButton"
                    :key="item.ms_resource_id"
                    :type="item.type"
                    @click="handleClickMore(scope.row, item.method)"
                    :style="{
                      width: '135px',
                      margin: item.ms_resource_id != '1' ? '10px 0 0 0' : '',
                    }"
                    >{{ item.name }}</el-button
                  >
                </div>
                <span slot="reference" style="cursor: pointer">更多</span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 数据列表END -->
      <!-- 翻页导航条 -->
      <div class="navigate-box">
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :total="parampters.totalCount"
            @size-change="handleSizeChange"
            :current-page.sync="parampters.pageIndex"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="parampters.pageRows"
            layout="total, sizes, prev, pager, next"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 翻页导航条END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>

<script>
import applybatchupd from "./mca_detail";
import mcaupload from "./mca_upload";
import fileapply from "./srcmanage_upload";
import haihangupload from "./haihang_upload";

export default {
  data() {
    return {
      autoHeight: {
        minHeight: this.$util.setTableHeight() + "px",
      },
      // 筛选条件
      parampters: {
        //查询参数
        loginsid: "", //登录会话SID
        pageRows: 20, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        applyBatchNo: "", //申请批次
        status: "", //状态
        ispCode: "",
        vopName: "",
      },
      // 查询出的表格数据
      tableLoading: true,
      columnData: [], //表头
      tableData: [],
      //confirm提示信息弹框
      confirmBox: null,
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "list",
      //字典集
      dicts: {},
      dialogVisible: false,
      dialog_time: 5,
      dialogTimer: null,
      delDialogVisible: false,
      delApplyBatchNo: "",
      confirmDelApplyBatchNo: "",
      showDeltips: false,
      allStatusButton: [],
      allRightButton: [],
      rightButton: [
        {
          id: 3,
          tag: "cardApplyBatch_button_exportDetail",
          name: "查看MCA明细",
          method: "toMcaDetail",
          type: "primary",
        },
        {
          id: 4,
          tag: "cardApplyBatch_button_exportDetail",
          name: "导入手机号明细",
          method: "toimportMobile",
          type: "primary",
        },
      ],
      ispList: [],
    };
  },
  // 进入页面加载数据
  activated() {
    this.$util.setTableHeight();
    this.$set(this.parampters, "applyBatchNo", "");
    this.$set(this.parampters, "vopName", "");
    this.$set(this.parampters, "ispCode", "");
    this.$set(this.parampters, "status", "");
    this.loadIsp();
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initSelectOptoins();
      this.loadColumnData();
      this.searchLoad();
    },

    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("dictionary", { type: "cardapply" });
      // this.loadSelectOptoins("cardapply", null);
      // this.loadSelectOptoins("dataformatNo", null);
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/herp/dictionary/";
      this.$axios
        .get(url, {
          params: params,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$set(this.dicts, dictKind, data.data.list);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    changeColumnClass(data) {
      if (data.column.property == "updateTime") {
        data.column.width = 150;
      }
      // if (data.columnIndex == 1 || data.columnIndex == 2) {
      //   return "tabcolumn_left";
      // }
    },

    /**
     * @augments  row 行所在的数据
     * 表格数据列 内容字典转换
     */
    formatter(row, column) {
      if (column.property == "dataformatNo") {
        return this.$dicts.transDict(
          this.dicts.dataformatNo,
          "code",
          "name",
          row.dataformatNo
        );
      } else if (column.property == "status") {
        return this.$dicts.transDict(
          this.dicts.cardapply,
          "code",
          "name",
          row.status
        );
      } else if (column.property == "timestamp") {
        if (
          row.timestamp == undefined ||
          row.timestamp == null ||
          row.timestamp == ""
        ) {
          return "";
        } else {
          let now = new Date(Number(row.timestamp));
          let y = now.getFullYear();
          let m = now.getMonth() + 1;
          let d = now.getDate();
          return (
            y +
            "-" +
            (m < 10 ? "0" + m : m) +
            "-" +
            (d < 10 ? "0" + d : d) +
            " " +
            now.toTimeString().substr(0, 8)
          );
        }
      }
    },

    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val) {
      this.parampters.pageIndex = val;
      // 重新获取当前页码的数据
      this.searchLoad();
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val) {
      // 修改每页显示条数
      this.parampters.pageRows = val;
      // 重新获取数据
      this.searchLoad();
    },

    /**
     * 条件筛选查询,加载数据
     */
    searchLoad() {
      this.parampters = this.$util.trimObjStr(this.parampters);
      this.parampters.loginsid = this.$util.getLoginer().sessionId;
      this.tableLoading = true;
      this.$axios
        .get("/herp/cardApplyBatch/?" + new Date().getTime(), {
          params: this.parampters,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.tableData = data.data.list;
            this.tableLoading = false;
            this.parampters.pageIndex =
              data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
            this.parampters.pageRows =
              data.data.pageSize != undefined
                ? parseInt(data.data.pageSize)
                : 0;
            this.parampters.totalCount =
              data.data.count != undefined ? parseInt(data.data.count) : 0;
          } else {
            this.tableLoading = false;
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },

    /**
     * 获取右侧可点击按钮
     */
    getRightButton(row) {
      // let rightbtn = this.allStatusButton[row.status];
      // this.rightButton = this.allStatusButton;
      // console.log(this.rightButton)
      // this.allRightButton.forEach(button => {
      //   rightbtn.forEach(item => {
      //     if (button.tag == item.tag) {
      //       this.rightButton.push(button);
      //     }
      //   });
      // });
    },

    /**
     * 点击右侧按钮
     */
    handleClickMore(row, method) {
      method == "toimportMobile"
        ? this[method](row, "cardApplyBatchId")
        : this[method](row);
    },

    /**
     * 校验当前是否有未通过的制卡申请单
     */
    preApply(flag) {
      switch (flag) {
        case "file":
          this.toFileApply();
          return;
        case "mca":
          this.toMca();
          return;
      }
    },
    /**
     * @description: FTP导入制卡文件
     * @param {*}
     * @return {*}
     */
    ftpZhika() {
      this.$axios
        .post(`/herp/cardApplyResp/ftp/importMulti/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.$message({
              type: "success",
              message: data.message,
            });
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @description: 批量导入mca文件ftp接口
     * @param {*}
     * @return {*}
     */
    ftpImportMca() {
      this.$axios
        .post(`/herp/mca/ftp/importMulti/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.$message({
              type: "success",
              message: data.message,
            });
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 制卡文件导入
     */
    toFileApply() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1",
      };
      let commDialog = this.$dialog.commDialog(
        "制卡文件导入",
        fileapply,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((data) => {
        if (data.type == "ok") this.searchLoad();
      });
    },
    /**
     * mca导入
     */
    toMca() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1",
      };
      let commDialog = this.$dialog.commDialog(
        "MCA文件导入",
        mcaupload,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((data) => {
        if (data.type == "ok") this.searchLoad();
      });
    },
    //加载基础运营商编码
    loadIsp() {
      this.$axios
        .get("/herp/isp/", {
          params: {
            pageIndex: this.parampters.pageIndex,
            pageRows: 50,
          },
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.ispList = data.data.list;
            console.log(this.ispList);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //mca详情
    toMcaDetail(row) {
      //页面参数
      var pageParam = {
        cardApplyBatchId: row.cardApplyBatchId,
        actType: "upd",
        applyBatchNo: row.applyBatchNo,
      };
      let commDialog = this.$dialog.commDialog(
        "查看MCA明细",
        applybatchupd,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") this.searchLoad();
      });
    },
    //重试导入制卡文件
    toRetryImport(row) {
      this.$axios
        .post(`/herp/cardApplyResp/${row.cardApplyBatchId}/import/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.$message({
              type: "success",
              message: data.message,
            });
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 加载资源管理表格的表头
     */
    loadColumnData(item) {
      this.$axios
        .get(`/herp/table/cardApplyBatch/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.columnData = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //导入海航文件
    toimportMobile(row, type) {
      this.selectedId = row && row.cardApplyBatchId ? row.cardApplyBatchId : "";
      //页面参数
      var pageParam = {
        seleid: this.selectedId,
        actType: "upd",
        importType: type,
      };
      let commDialog = this.$dialog.commDialog(
        "导入手机号文件",
        haihangupload,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") this.searchLoad();
      });
    },
    //重试导入海航文件
    toRetryImportHaihang(row) {
      //TODO: 待接口开发
    },
  },
};
</script>
